<template>
    <div class="footer">
        <ul>
            <li :class="i === index ? 'bg' : '' " @click="change(index)" v-for="(item,index) in footerArr" :key="index">{{ item }}</li>
        </ul>
    </div>

</template>

<script>
import nav from "../mixins/nav"
    export default {
        name:"Footer",
        data(){
            return{
                footerArr:["企业文化","关于我们","招聘信息","联系我们","爱啥啥"],
            }
        },
        mixins:[nav],
        
    }
</script>

<style scoped>
.footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 50px;
  background: rgb(37, 37, 37);
  line-height: 50px;
  color: white;
  font-size: 25px;
}

.footer ul li {
  width: 20%;
  text-align: center;
}

.footer ul li:hover {
  cursor: pointer;
  background: rgb(211, 135, 135);
}

.bg {
  background: hotpink;
}
</style>
